<template>
  <view class="timer-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="header-title">定时器功能演示</text>
      <text class="header-subtitle">setTimeout & setInterval 用法示例</text>
    </view>

    <!-- 主内容区：分栏布局 -->
    <view class="content-container">
      <!-- 单次定时器区域 -->
      <view class="timer-card timeout-card">
        <view class="card-header">
          <text class="card-icon">⏱️</text>
          <text class="card-title">单次定时器 (setTimeout)</text>
        </view>
        <view class="card-body">
          <button class="func-btn primary-btn" @click="onSetTimeCall">基础定时器（3秒）</button>
          <button class="func-btn secondary-btn" @click="() => onSetTimeCallxy(userName, password)">带参数定时器（2秒）</button>
          <button class="func-btn cancel-btn" @click="onTimeoutClear">取消单次定时器</button>
          <view class="status-text" v-if="timeoutStatus">{{ timeoutStatus }}</view>
        </view>
      </view>

      <!-- 周期定时器区域 -->
      <view class="timer-card interval-card">
        <view class="card-header">
          <text class="card-icon">🔄</text>
          <text class="card-title">周期定时器 (setInterval)</text>
        </view>
        <view class="card-body">
          <button class="func-btn primary-btn" @click="onInterval">启动周期打印（1秒/次）</button>
          <button class="func-btn cancel-btn" @click="onClearInterval">取消周期定时器</button>
          
          <!-- 计数显示（仅周期定时器运行时显示） -->
          <view class="count-container" v-if="intervalID">
            <text class="count-label">当前计数：</text>
            <text class="count-value">{{ count }}</text>
          </view>
          
          <view class="status-text" v-if="intervalStatus">{{ intervalStatus }}</view>
        </view>
      </view>
    </view>

    <!-- 底部说明 -->
    <view class="footer-note">
      <text class="note-text">提示：所有操作日志可在控制台查看</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: 'czy',
      password: '666',
      timeoutID: null,
      count: 0,
      intervalID: null,
      timeoutStatus: '', // 单次定时器状态提示
      intervalStatus: ''  // 周期定时器状态提示
    };
  },
  methods: {
    onSetTimeCall() {
      if (this.timeoutID) {
        this.timeoutStatus = '已有活跃的单次定时器，请勿重复启动';
        this.clearStatus('timeout');
        return;
      }
      console.log("触发基础单次定时器...");
      this.timeoutStatus = '基础定时器已启动（3秒后执行）';
      this.timeoutID = setTimeout(() => {
        console.log("我延时3秒才会打印");
        this.timeoutStatus = '基础定时器执行完成';
        this.timeoutID = null;
        this.clearStatus('timeout');
      }, 3000);
    },

    onSetTimeCallxy(name, pwd) {
      if (this.timeoutID) {
        this.timeoutStatus = '已有活跃的单次定时器，请勿重复启动';
        this.clearStatus('timeout');
        return;
      }
      console.log(`触发带参数单次定时器，原始参数：name=${name}, pwd=${pwd}`);
      this.timeoutStatus = `带参数定时器已启动（参数：${name}/${pwd}）`;
      this.timeoutID = setTimeout((x, y) => {
        console.log(`延时2秒后接收参数：x=${x}, y=${y}`);
        this.timeoutStatus = `带参数定时器执行完成（接收：${x}/${y}）`;
        this.timeoutID = null;
        this.clearStatus('timeout');
      }, 2000, name, pwd);
    },

    onTimeoutClear() {
      if (this.timeoutID) {
        clearTimeout(this.timeoutID);
        console.log(`单次定时器（ID: ${this.timeoutID}）已取消`);
        this.timeoutStatus = `单次定时器已取消（ID: ${this.timeoutID}）`;
        this.timeoutID = null;
        this.clearStatus('timeout');
      } else {
        console.log("当前没有活跃的单次定时器");
        this.timeoutStatus = '当前无活跃的单次定时器';
        this.clearStatus('timeout');
      }
    },

    onInterval() {
      if (this.intervalID) {
        this.intervalStatus = '周期定时器已在运行中';
        this.clearStatus('interval');
        return;
      }
      console.log("触发周期定时器（每秒执行一次）...");
      this.intervalStatus = '周期定时器已启动（每秒计数+1）';
      this.intervalID = setInterval(() => {
        this.count++;
        console.log(`周期打印 count: ${this.count}`);
      }, 1000);
    },

    onClearInterval() {
      if (this.intervalID) {
        clearInterval(this.intervalID);
        console.log(`周期定时器（ID: ${this.intervalID}）已取消，最终计数：${this.count}`);
        this.intervalStatus = `已取消（最终计数：${this.count}）`;
        this.intervalID = null;
        this.clearStatus('interval');
      } else {
        console.log("当前没有活跃的周期定时器");
        this.intervalStatus = '当前无活跃的周期定时器';
        this.clearStatus('interval');
      }
    },

    // 延迟清除状态提示（3秒）
    clearStatus(type) {
      setTimeout(() => {
        if (type === 'timeout') this.timeoutStatus = '';
        if (type === 'interval') this.intervalStatus = '';
      }, 3000);
    }
  },
  // 页面卸载时清除所有定时器（UniApp多端兼容）
  onUnload() {
    if (this.timeoutID) clearTimeout(this.timeoutID);
    if (this.intervalID) clearInterval(this.intervalID);
  }
};
</script>

<style scoped>
/* 页面全局样式 */
.timer-page {
  min-height: 100vh;
  background-color: #f7f9fc;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

/* 页面头部 */
.page-header {
  text-align: center;
  padding: 10rpx 0;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2d3748;
  display: block;
  margin-bottom: 8rpx;
}

.header-subtitle {
  font-size: 22rpx;
  color: #718096;
}

/* 主内容区：分栏布局 */
.content-container {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  flex: 1;
}

/* 定时器卡片样式 */
.timer-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.timer-card:hover {
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  transform: translateY(-2rpx);
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f0f2f5;
}

.card-icon {
  font-size: 36rpx;
  margin-right: 15rpx;
  color: #4299e1;
}

.timeout-card .card-icon {
  color: #9f7aea;
}

.card-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #2d3748;
}

/* 卡片内容区 */
.card-body {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 功能按钮样式（修复UniApp按钮样式冲突） */
.func-btn {
  height: 88rpx !important;
  line-height: 88rpx !important;
  font-size: 26rpx !important;
  border-radius: 12rpx !important;
  border: none !important;
  transition: all 0.2s ease;
}

.primary-btn {
  background-color: #4299e1 !important;
  color: #ffffff !important;
}

.primary-btn:active {
  background-color: #3182ce !important;
  transform: translateY(2rpx);
}

.secondary-btn {
  background-color: #9f7aea !important;
  color: #ffffff !important;
}

.secondary-btn:active {
  background-color: #805ad5 !important;
  transform: translateY(2rpx);
}

.cancel-btn {
  background-color: #fef7fb !important;
  color: #e53e3e !important;
  border: 1rpx solid #fce4ec !important;
}

.cancel-btn:active {
  background-color: #fdf2f8 !important;
  transform: translateY(2rpx);
}

/* 计数显示容器 */
.count-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx;
  background-color: #f8f9fa;
  border-radius: 10rpx;
  margin-top: 10rpx;
}

.count-label {
  font-size: 24rpx;
  color: #718096;
  margin-right: 15rpx;
}

.count-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #4299e1;
}

/* 状态提示文本 */
.status-text {
  font-size: 22rpx;
  color: #718096;
  text-align: center;
  padding: 10rpx 0;
  color: #4a5568;
}

/* 底部说明 */
.footer-note {
  text-align: center;
  padding: 10rpx 0;
}

.note-text {
  font-size: 20rpx;
  color: #a0aec0;
}

/* 响应式调整：大屏横向分栏 */
@media (min-width: 768px) {
  .content-container {
    flex-direction: row;
    gap: 30rpx;
    max-width: 1000rpx;
    margin: 0 auto;
  }

  .timer-card {
    flex: 1;
  }
}
</style>